<template>
	<view style="border-radius: 30rpx;">
		<!-- 	<u-tabbar :border="false" :active="useStore.activeTab" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true" activeColor="pink" style="border-radius: 50rpx;">

			<view
				style="width:100%;display: flex;justify-content: center;background-color: #fff;border-radius: 20rpx;">
				<u-tabbar-item v-for="(item, index) in tabbarItems" :key="index" :icon="getTabbarIcon(item, index)"
					:text="item.text" @click="handleTabbarItemClick(item, index)">
					<template #active-icon>
						<image class="u-page__item__slot-icon"
							:src="item.selectedIconPath"></image>
					</template>
					<template #inactive-icon>
						<image class="u-page__item__slot-icon" :src="item.iconPath">
						</image>
					</template>
				</u-tabbar-item>
			</view>
		</u-tabbar> -->


		<view class="tabbar">
			<view v-for="(item, index) in tabbarItems" @click="handleTabbarItemClick(item, index)">
				<view>
					<image style="width: 48rpx;height: 48rpx;" :src="getTabbarIcon(item,index)"></image>
					<view>{{item.text}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	//引入pinia仓库
	import useUserStore from '@/store/user.js'
	let useStore = useUserStore()

	const tabbarItems = [{
			"pagePath": "/pages/index/index",
			"selectedIconPath": "../../static/tabbar-icon/home_select.svg",
			"iconPath": "../../static/tabbar-icon/home.svg",
			"text": "首页"
		},
		{
			"pagePath": "/pages/course/course",
			"selectedIconPath": "../../static/tabbar-icon/course_select.svg",
			"iconPath": "../../static/tabbar-icon/course.svg",
			"text": "课程"
		},
		{
			"pagePath": "/pages/recommend/recommend",
			"selectedIconPath": "../../static/tabbar-icon/recommend_select.svg",
			"iconPath": "../../static/tabbar-icon/recommend.svg",
			"text": "推荐"
		},
		{
			"pagePath": "/pages/my/my",
			"selectedIconPath": "../../static/tabbar-icon/my_select.svg",
			"iconPath": "../../static/tabbar-icon/my.svg",
			"text": "我的"
		}
	]
	//点击tabbar按钮
	const handleTabbarItemClick = (item, index) => {
		console.log("item", item);
		console.log(index);
		if (useStore.activeTab !== index) {
			useStore.setActive(index)
			const path = item.pagePath
			console.log("路径", path);
			uni.switchTab({
				url: path
			})
		}

	}
	//图标的切换
	const getTabbarIcon = (item, index) => {
		console.log(useStore.activeTab === index ? item.selectedIconPath : item.iconPath);
		return useStore.activeTab === index ? item.selectedIconPath : item.iconPath
	}
</script>

<style>
	v-deep:.u-tabbar {
		border-radius: 30rpx !important;
	}

	.tabbar {
		display: flex;
		justify-content: space-evenly;
		position: fixed;
		width: 100%;
		bottom: 0;
		background-color: #fff;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		padding: 1vh 0;
	}
</style>